diligent-next/pages/single-data/[dataId].js

import DataDetailsCard from '../../components/cards/data-details-card/DataDetailsCard';
import { getDataIds } from '../../requests/dataIdsRequest';
import { getSingleData } from '../../requests/singleDataRequest';

const SignelDataPage = (props) => {
  const data = props.selectedData;

  if (!data) {
    return <h1>{props.message}</h1>;
  }
  return <DataDetailsCard data={data.singleData} />;
};

export async function getStaticProps(context) {
  const dataId = context.params.dataId;

  try {
    const data = await getSingleData(dataId);
    return {
      props: {
        selectedData: data,
      },
      revalidate: 60,
    };
  } catch (error) {
    return {
      props: {
        selectedData: null,
        message: error.message,
      },
      revalidate: 60,
    };
  }
}

export async function getStaticPaths() {
  try {
    const firstPageDataIds = await getDataIds();
    const paths = firstPageDataIds.dataIds.map((id) => ({
      params: { dataId: id },
    }));

    return {
      paths: paths,
      fallback: 'blocking',
    };
  } catch (error) {
    return {
      paths: [],
      fallback: 'blocking',
    };
  }
}

export default SignelDataPage;